<template>
  <div class="gift">
    <van-tabs v-model:active="formData.active">
      <van-tab title="藏品">
        <Tabcollotion />
      </van-tab>
      <van-tab title="盲盒">
        <Blindbox />
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
import { ref, defineComponent, reactive, onMounted, toRefs, nextTick } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router"
import { collectionList, IPageByState, cancelSell, openBlindBox } from "@/api/public";
import Blindbox from "./node/Blindbox.vue";
import Tabcollotion from "./node/tabcollotion.vue";
export default {
  components: {
    Blindbox,
    Tabcollotion
  },
  setup(props) {
    const formData = reactive({
      active: 0,
      page: 0,
      size: 100,
      total: 0,
      loading: false,
    })
    const CollectionList = ref([])
    const onload = async () => {
      const data = {
        page: formData.page,
        size: formData.size,
        propType: formData.propType,
        userCollectionState: formData.userCollectionState,
      }
      const res = await collectionList(data)
      formData.loading = false
      formData.page++
      formData.total = res.data.data.total
      CollectionList.value = CollectionList.value.concat(res.data.data.records)
      if (formData.total <= CollectionList.value.length) {
        formData.finished = true;
      } else {
        // formData.finished = false;
      }
      formData.loading = false
    }
    const open = (id, str) => {
      const data = {
        id: id
      }
      openBlindBox(id).then(res => {
        if (res.data.success) {
          Toast(str + '开启成功')
          CollectionList.value = [];
          formData.sellType = 0
          formData.page = 0
          formData.propType = 3
          formData.isActive = false
          formData.Active = true
          onLoad()
        } else {
          Toast(res.data.message)
        }
      })
    }
    return {
      onload,
      open,
      formData,
    }
  }
}
</script>
<style lang="less" scoped>
.gift {
  &:deep(.van-tabs__wrap) {
    padding: 20px 50px 0px;
    width: 45%;
  }
  &:deep(.van-tabs__nav) {
    background: transparent;
  }
  &:deep(.van-tabs__line) {
    background: transparent;
  }
  &:deep(.van-tab--active) {
    font-size: 36px;
    font-family: Source Han Sans CN;
    font-weight: bold !important;
    color: #ffffff !important;
  }
  &:deep(.van-tab) {
    font-size: 36px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #b9c4c7;
  }
}
</style>